<template>
    <div>
        <div class="form-section">
            <div class="form-item  form-item-style1">
                <div class="label-title">
                    <label>上传日期</label>
                </div>
                <div>
                    <p>{{detailObj.UploadDate}}</p>
                </div>
            </div>
            <div class="form-item form-item-style1"
                 v-if="!detailObj.DutyFB">
                <div class="label-title">
                    <label>项目</label>
                </div>
                <div>
                    <p>{{detailObj.Project}}</p>
                </div>
            </div>
            <div v-else>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>分包</label>
                    </div>
                    <div>
                        <p>{{detailObj.DutyFB}}</p>
                    </div>
                </div>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>班组</label>
                    </div>
                    <div>
                        <p>{{detailObj.DutyGroup}}</p>
                    </div>
                </div>
            </div>
            <div class="form-item form-item-style2">
                <div class="label-title space-between">
                    <div class="space-between">
                        <label>信息评价</label>
                    </div>
                    <span @click="unfoldMeasure = !unfoldMeasure">{{unfoldMeasure?'收起': '展开'}}</span>
                </div>
                <div>
                    <p class="textarea"
                       :class="{'unfold':unfoldMeasure}">{{detailObj.Appraise}}</p>
                </div>
            </div>
            <div class="form-item form-item-style2">
                <div class="label-title space-between">
                    <div class="space-between">
                        <label>照片</label>
                        <i class="iconfont icon-required"></i>
                    </div>
                    <span>当前共{{detailObj.Url?detailObj.Url.length:0}}张照片</span>
                </div>
                <div class="upload-wrap">
                    <upload v-if="detailObj.Url"
                            :imgList="detailObj.Url"></upload>
                </div>
            </div>
            <div class="form-item  form-item-style1">
                <div class="label-title">
                    <label>上传人</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div>
                    <p>{{detailObj.UploadPerson}}</p>
                </div>
            </div>
        </div>
        <!-- <div class="cut-off-rule"></div>
        <div class="video-section">
            <video controls="controls"
                   src="https://www.w3school.com.cn/example/html5/mov_bbb.mp4"></video>
        </div> -->
        <div class="cut-off-rule"></div>
        <div class="live-user">
            <div @click="clickPraise">
                <img class="thumb"
                     src="../../../static/images/zai_01.png"
                     alt="">
                <span>{{detailObj.Praise}}</span>
            </div>
            <p>{{detailObj.PraiseNames}}等觉得很赞</p>
        </div>
        <myMenu></myMenu>
    </div>
</template>
<script>
import myMenu from '@/commonComponents/menu'
import upload from '@/commonComponents/upload/index'
export default {
    name: 'heiBangDetail',
    data () {
        return {
            userInfo: {},
            detailObj: {},
            unfoldMeasure: false
        }
    },
    components: {
        upload,
        myMenu
    },
    created () {
        this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
        this.getDetail()
    },
    methods: {
        getDetail () {
            let params = {
                'business': 'ExposalDetails',
                'data': {
                    ID: this.$route.query.id
                },
                'userId': this.userInfo.userid
            }

            this.$axiosAjax.getConfigJson(params)
                .then((res) => {
                    if (res.data.code === 0) {
                        this.detailObj = res.data.data
                    }
                }).catch((response) => {
                })
        },
        clickPraise () {
            let params = {
                'business': 'ExposalPraise',
                'data': {
                    ID: this.$route.query.id
                },
                'userId': this.userInfo.userid
            }

            this.$axiosAjax.getConfigJson(params)
                .then((res) => {
                    if (res.data.code === 0) {
                        this.detailObj.Praise = res.data.data.Praise
                        this.detailObj.PraiseNames = res.data.data.PraiseNames
                    }
                }).catch((response) => {
                })
        }
    }
}
</script>
<style scoped>
.video-section {
    padding: 20px;
}
.video-section video {
    width: 100%;
    display: block;
}
.live-user {
    display: flex;
    align-items: flex-end;
    padding: 10px;
}
.live-user div {
    display: flex;
    align-items: flex-end;
}
.live-user img {
    width: 20px;
}
.live-user span {
    font-size: 14px;
    color: #333;
}
.live-user p {
    margin-left: 10px;
    font-size: 14px;
    color: #333;
}
</style>
